<template>
  <div id="swipercom">
    <div class="swiper-container" id="swiperIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in imgs" :key="index">
          <img :src="item.pic" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import Swiper from "swiper";
import * as indexApi from "@/api/index";

export default {
  name: "swiperCom",
  data() {
    return {
      imgs: [],
    };
  },
  methods: {
    carouselScroll() {
      var mySwiper = new Swiper("#swiperIndex", {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    },
  },
  async mounted() {
    let result = await indexApi.getBanner({
      type: 1,
    });
    this.imgs = result.banners;
    this.$nextTick(() => {
      this.carouselScroll();
    });
  },
};
</script>


<style lang="less">
#swipercom {
  width: 7.5rem;
  .swiper-container {
    width: 7.1rem;
    height: 2.6rem;
    border-radius: 0.1rem;
    .swiper-slide {
      img {
        width: 100%;
      }
    }
  }
  .swiper-pagination-bullet-active {
    background-color: orangered;
  }
}
</style>

